<template>
  <el-dialog title="异常详情" :width="1000" v-model="isShowDialog">
    <div class="content-wrap">
      <table>
        <tbody>
        <tr>
          <td class="name-style">异常ID</td>
          <td class="time-3">#{{ detail?.id }}</td>
        </tr>
        <tr>
          <td class="name-style">错误码</td>
          <td class="time-3">{{ detail?.code }}</td>
        </tr>
        <tr>
          <td class="name-style">异常类型</td>
          <td class="time-3">
            <el-tag type="danger">{{ detail?.source }}</el-tag>
          </td>
        </tr>
        <tr>
          <td class="name-style">异常消息</td>
          <td class="time-3">{{ detail?.msg }}</td>
        </tr>
        <tr>
          <td class="name-style">异常堆栈</td>
          <td class="time-3">
            <div v-if="detail.traces" style="width: 800px;">
              <div style="margin-bottom: 15px;" v-for="(item,k) in detail.traces" :key="'kkk'+k">
                #{{ k }}&nbsp;{{ item.file }}({{ item.line }}):&nbsp;{{ item.class }}{{ item.type }}<u>{{ item.function }}</u>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="name-style">记录时间</td>
          <td class="time-3">{{ detail?.createdAt }}</td>
        </tr>
        </tbody>
      </table>
    </div>
    <template #footer>
				<span class="dialog-footer">
					<el-button type="danger" @click="onCancel" size="default">关闭</el-button>
				</span>
    </template>
  </el-dialog>
</template>
<script lang="ts">
import {reactive, toRefs, defineComponent} from 'vue';

export default defineComponent({
  name: "apiV1SystemSysExceptionLogDetail",
  setup(props, {emit}) {
    const state = reactive({
      isShowDialog: false,
      detail: {}
    });
    // 打开弹窗
    const openDialog = (_row: any) => {
      state.detail = _row;
      state.isShowDialog = true;
    };
    // 关闭弹窗
    const closeDialog = () => {
      state.isShowDialog = false;
    };
    // 取消
    const onCancel = () => {
      closeDialog();
    };
    return {
      openDialog,
      closeDialog,
      onCancel,
      ...toRefs(state),
    };
  }
})
</script>
<style scoped lang="scss">
.content-wrap{
  table {
    border-collapse: collapse;
    width: calc(100% - 40px);

    tr {
      border: 1px solid #EFEFEF;

      td {
        border: 1px solid #EFEFEF;
        padding: 10px;
      }

      .name-style {
        background-color: #f5f7fa;
        font-weight: bold;
        min-width: 120px;
        text-align: center;
        width: 15%;
      }
      .time-3{
        width: 85%;
      }
    }
  }
}

</style>
